<template>
  <n-menu :options="menuOptions" @update:value="handleUpdateValue" :collapsed-width="64" :collapsed-icon-size="22"
    :collapsed="false" :value="curSelNav" style="color:white" />
</template>

<script setup>
import { h, ref } from "vue";
import { NIcon } from "naive-ui";
import { RouterLink } from "vue-router";
import { navMap } from "@/router";
import { useRouter } from "vue-router";

var curSelNav = ref('/player');

const router = useRouter();

// 根据导航，自动更新nav UI
router.afterEach((to, from) => {
  curSelNav.value = to.name;
  return true;
});
function renderIcon(icon, color) {
  return () => h(NIcon, { size: 24, color: color }, { default: () => h(icon) });
}

function buildMenu() {
  let navMenus = navMap.map((item) => {
    if (item.type !== null) {
      return {
        key: item.key,
        type: item.type,
        props: {},
      };
    } else {
      return {
        label: () =>
          h(
            RouterLink,
            {
              to: {
                name: item.key,
                params: {},
              },
            },
            { default: () => item.name }
          ),
        key: item.key,
        icon: renderIcon(item.icon, item.color),
      };
    }
  });
  return navMenus;
}

const menuOptions = ref(buildMenu());

function handleUpdateValue(key, item) {
  curSelNav.value = key;
  console.log(key, item);
}
</script>

<style>
.n-menu-divider {
  opacity: 0.6;
}
</style>